import React, { useEffect, useState } from 'react';
import { Tabs, Form, Select, Input, DatePicker, Button, Table } from 'antd';
import type { TabsProps } from 'antd';
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../api/salary.js'
import * as salary from '../../../../api/requestsalary.js'
import '../Salary/AddAccount.scss'
const { Search } = Input;

function AddAccount(props: any) {
    var [addaccount1, setAddaccount1] = useState([])
    var [addaccount2, setAddaccount2] = useState([])
    var navigate = useNavigate()
    useEffect(() => { //核对算薪人员和薪资核算列表
        // service.salary_addaccount1().then((res) => {
        //     console.log(res);
        //     setAddaccount1(res.data)
        // })
        salary.salary_project().then((res) => {
            // console.log(res);
            setAddaccount1(res.data.data)
        })
        // service.salary_addaccount2().then((res) => {
        //     // console.log(res);
        //     setAddaccount2(res.data)
        // })
        salary.findathermon().then((res) => {
            console.log(res);
            setAddaccount2(res.data.data)
        })
    }, [])
    var del1= async(hid:any)=>{ //删除第二页
      var res=await salary.deletesar({hid})
    //   console.log(res);
    //   console.log(hid);
      setAddaccount1(res.data.data)
    }
    var del2= async(cid:any)=>{ //删除第三页
        var res=await salary.deletetar({cid})
        // console.log(res);
        // console.log(cid);
        setAddaccount2(res.data.data)
    }
    interface DataType {
        key: React.Key;
        name: string;
        age: number;
        address: string;
    }
    const columns1 = [
        {
            title: '姓名',
            dataIndex: 'employee_name',
        },
        {
            title: '员工编号',
            dataIndex: 'employee_id',
        },
        {
            title: '部门',
            dataIndex: 'department',
        },
        {
            title: '职位',
            dataIndex: 'position',
        },
        {
            title: '手机号码',
            dataIndex: 'phone_number',
        },
        {
            title: '工作类型',
            dataIndex: 'employment_type',
        },
        {
            title: '员工状态',
            dataIndex: 'employee_status',
        },
        {
            title: '入职日期',
            dataIndex: 'entry_date',
        },
        {
            title: '最后工作日期',
            dataIndex: 'endwork_date',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_: any, record: any) => <a onClick={()=>{del1(record.hid)}}>移除</a>
        },
    ];
    const data1: DataType[] = addaccount1;
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection1 = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const columns2 = [
        {
            title: '姓名',
            dataIndex: 'employee_name',
        },
        {
            title: '员工编号',
            dataIndex: 'employee_id',
        },
        {
            title: '部门',
            dataIndex: 'department',
        },
        {
            title: '职位',
            dataIndex: 'position',
        },
        {
            title: '手机号码',
            dataIndex: 'phone_number',
        },
        {
            title: '工作类型',
            dataIndex: 'employment_type',
        },
        {
            title: '员工状态',
            dataIndex: 'employee_status',
        },
        {
            title: '基本工资',
            dataIndex: 'basic_salary',
        },
        {
            title: '事假(天)',
            dataIndex: 'personal_leave',
        },
        {
            title: '事假扣款(元)',
            dataIndex: 'personal_leave_deduction',
        },
        {
            title: '加班时长(小时)',
            dataIndex: 'overtime_hours',
        },
        {
            title: '加班工资(元)',
            dataIndex: 'overtime_salary',
        },
        {
            title: '个税(元)',
            dataIndex: 'personal_tax',
        },
        {
            title: '社保(元)',
            dataIndex: 'social_insurance',
        },
        {
            title: '实发工资(元)',
            dataIndex: 'fact_salary',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_: any, record: any) => <a onClick={()=>{del2(record.cid)}}>移除</a>
        },
    ];
    const data2: DataType[] = addaccount2;
    const [selectedRowKeys2, setSelectedRowKeys2] = useState<React.Key[]>([]);
    const onSelectChange2 = (newSelectedRowKeys2: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys2);
        setSelectedRowKeys2(newSelectedRowKeys2);
    };
    const rowSelection2 = {
        selectedRowKeys,
        onChange: onSelectChange2,
    };
    const onChange = (key: string) => { //页面切换
        console.log(key);
    };
    const selete1 = async(value: any) => {  //核对算薪人员中选择
        console.log(value);
        // service.addaccount1_select({ type: value }).then((res) => {
        //     console.log(res);
        //     setAddaccount1(res.data)
        // })
    //    var res=await salary.findbystatus({ employee_status: value })
    //    console.log(res);
       
    };
    const onSearch1 = (value: any) => { //核对算薪人员中搜索
        console.log(value);
        service.addaccount1_search({ person: value }).then((res) => {
            console.log(res);
            setAddaccount1(res.data)
        })
    };
    const onSearch2 = (value: any) => { //薪资核算中搜索
        // console.log(value);
        // service.addaccount2_search({ person: value }).then((res) => {
        //     console.log(res);
        //     setAddaccount2(res.data)
        // })
        salary.findathermonbyid({ employee_id: value }).then((res) => {
            console.log(res);
            setAddaccount2(res.data.data.data)
        })
    };
    const gouOut = () => { //回到主页面
        navigate('/index/moneys/salary/account')
    };
    const onFinish = async(values: any) => { //添加薪资核算表
        // console.log('Success:', values);
        var res=await salary.addSar(values)
        // console.log(res);
    };
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '1️⃣ 创建薪资核算',
            children: <Form
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 10 }}
                layout="horizontal"
                onFinish={onFinish}
                style={{ maxWidth: 1000 }}
            >
                <Form.Item label="薪资组" name="paymonth">
                    <Select placeholder='请选择'
                        options={[
                            { value: "研发一组", label: "研发一组" },
                            { value: "研发二组", label: "研发二组" },
                            { value: "研发三组", label: "研发三组" }
                        ]}
                    />
                </Form.Item>
                <Form.Item label="算薪周期"  name="payrollname">
                    <Select placeholder='请选择'
                        options={[
                            { value: "2022年1月-2022年3月", label: "2022年1月-2022年3月" }
                        ]}
                    />
                </Form.Item>
                <Form.Item label="核算表名称"  name="paylistname">
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" >开始核算</Button>
                </Form.Item>
            </Form>,
        },
        {
            key: '2',
            label: '2️⃣ 核对算薪人员',
            children: (
                <div className='two-box'>
                    <Table rowSelection={rowSelection1} columns={columns1} dataSource={data1} />
                </div>
            ),
        },
        {
            key: '3',
            label: '3️⃣ 薪资核算',
            children: (
                <div className='three-box'>
                    <div className='two-boxtop'>
                        <div>
                            <Search placeholder="请输入工号" onSearch={(value: any) => { onSearch2(value) }} style={{ width: 320 }} />
                        </div>
                        <Button type="primary" ghost>批量移除</Button>
                    </div>
                    <Table rowSelection={rowSelection2} columns={columns2} dataSource={data2} />
                </div>
            ),
        },
    ];
    return (
        <div className='addaccount'>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            <Button onClick={() => { gouOut() }}>退出核算</Button>
        </div>
    );
}

export default AddAccount;